import React, { useState, useEffect } from 'react'
import { Form, Input, Select, Space ,Button} from 'antd';
import { getAll } from '../../services/classify';
import { SearchOutlined } from '@ant-design/icons';
export default function Search({ show }) {
    let { Option } = Select
    const { Search } = Input;
    const [type, setType] = useState("name")
    let [state, setState] = useState(true)
    let [types, setTypes] = useState([]);
 let [sort,setSort]= useState("")
    let showModal = async () => {
        let { data } = await getAll()
        setTypes(data.rows)
    }
    useEffect(() => {
        showModal()
    }, [types.length])
    const onSearch = async (value) => {
        console.log(value, type);
        show({ value, type, current: 1 })
    }
    const SelectBtn = (value) => {
        console.log(value);
        if (value == "types") {
            setState(false)
        } else {
            setState(true)
        }
    }
    let onChange=(value) => {
        setSort(value)
        console.log(value);
    }
    let onClick=()=>{
        console.log( sort, type);
        show({ value:sort, type })
    }
    const children = [];
    for (let i = 0; i < types.length; i++) {
        children.push(<Option key={types[i]._id} value={types[i]._id}>{types[i].sort}</Option>);
    }
    return (
        <div style={{ display: 'flex', marginLeft: "50px" }}>
            <Form.Item
                name="select"
                rules={[
                    {
                        required: true,
                        message: 'Please select your country!',
                    },
                ]}
            >
                <Select placeholder="姓名" style={{ width: "100px", }} onChange={(value) => {
                    SelectBtn(value)
                    setType(value)
                }}>
                    <Option value="name">商品名</Option>
                    <Option value="color">颜色</Option>
                    <Option value="types">类型</Option>
                </Select>
            </Form.Item>

            <Space direction="vertical">
                {state ?
                    <Search placeholder="请输入" onSearch={onSearch} enterButton /> :
                    <div>
                        <Select
                            style={{
                                width: 200,
                            }}
                            onChange={onChange}
                        >
                            {children}
                        </Select>
                        <Button type="primary" width="40" onClick={onClick} icon={<SearchOutlined />}>
                        </Button>

                    </div>

                }
            </Space>


        </div>
    )
}
